<template>
  <div class="template">
    <div class="search">
      <Button type="primary" icon="ios-add" @click="getAdd()">添加菜单</Button>
    </div>
    <div class="table authTable">
      <Table row-key="menuId" :columns="diyData.columns" :data="apiData.apiAccessList"></Table>
    </div>

    <addAuth v-model="diyDom.showModal" :menuId='diyData.menuId' @on-success="getSuccess()"></addAuth>
  </div>
</template>

<script>
import {
    menuList,menuDelete
  } from '@/api/system/menu.js'
   import addAuth from './add-auth.vue'
export default {
  name: '',
   components: {
      addAuth
    },
  data () {
    return {
      query: {},
      search: {
        pageNo: 1
      },
      diyDom: {
        showModal:false,
      },
      diyData: {
        menuId:'',
        columns: [
          {
            title: '名称',
            width:'350',
            key: 'name',
             tree: true,
            render: (h, params) => {
              if (params.row.parentId != 0) {
                return h('div',{
                   style: {
                    display: 'inline-block'
                   }
                },[
                  h(
                    'span',
                    {
                      style: {
                        marginLeft: `${params.row.type * 20}px`
                      }
                    },
                    '|— — ' + params.row.name
                  )
                ])
              } else {
                return h('div',{
                   style: {
                    display: 'inline-block'
                   }
                }, [h('span', {}, params.row.name)])
              }
            }
          },
          {
            title: '类型',
            key: 'type',
            width:'100',
            render: (h, params) => {
              return h('div',params.row.type==1?'菜单':params.row.type==2?'按钮':'目录')
            }
          },
          {
            title: '排序',
             width:'100',
            key: 'orderNum'
          },
          {
            title: '路径',
             width:'200',
            key: 'url'
          },
          {
            title: '操作',
            render: (h, params) => {
              return h('div', [
                h(
                  'a',
                  {
                    style: {
                      marginRight: '10px',
                      borderRight: '1px solid #c5c5c5',
                      paddingRight: '10px',
                      color: '#2D8cF0'
                    },
                    on: {
                      click: () => {
                        this.diyDom.showModal=true
                        this.diyData.menuId=params.row.menuId
                        console.log(this.diyData.menuId)
                        // this.$router.push({
                        //   name: 'add-auth',
                        //   query: {
                        //     id: params.row.id
                        //   }
                        // })
                      }
                    }
                  },
                  '编辑'
                ),
                h(
                  'a',
                  {
                    style: {
                      color: '#ed4014'
                    },
                    on: {
                      click: () => {
                        this.deleteAccess(params.row.menuId)
                      }
                    }
                  },
                  '删除'
                )
              ])
            }
          }
        ]
      },
      apiData: {
        apiAccessList: []
      }
    }
  },
  methods: {
    getAdd(){
      this.diyData.menuId=''
      this.diyDom.showModal=true
    },
    // 获取表格数据
    getTableList () {
      this.$store.commit('setSpinShow', true)
      menuList({
        pageNo: this.search.pageNo
      })
        .then(res => {
          if(this.search.pageNo==1){
            this.apiData.apiAccessList=[]
          }
          // this.apiData.apiAccessList = res.data  
          this.dealAccessData(res.data)
        })
        .finally(() => this.$store.commit('setSpinShow', false))
    },
      // 处理数据
        dealAccessData(data) {
            let map = {};
            data.forEach(item => {
                item.title=item.name
                map[item.menuId] = item;
            });
            data.forEach(item => {
                let parent = map[item.parentId];  //判断item的pid是否是否存在map中
                if (parent) {  //如果存在则表示item不是最顶层的数据
                    (parent.children || (parent.children = [])).push(item);
                } else {
                    this.apiData.apiAccessList.push(item);  // 如果不存在 则是顶层数据
                }
            });
        },

    // 删除权限
    deleteAccess (menuId) {
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除当前数据？',
        onOk: () => {
          setTimeout(() => {
            menuDelete({menuId:menuId}).then(res => {
              this.$Message.success('删除成功')
              this.getTableList()
            })
          }, 300)
        }
      })
    },
    pageChange (e) {
      this.search.pageNo = e
      this.getTableList()
    },
    getSuccess(){
      this.search.pageNo = 1
      this.diyData.menuId=''
      this.getTableList()
    }
  },
   mounted () {
    this.getTableList()
  },
  activated () {
    this.getTableList();
  },
}
</script>

<style scoped lang="less">
  .template {
    .search {
      display: flex;
    }

    .table {
      margin-top: 10px;
    }

    .tree_part {
      margin-top: 10px;
    }
    
  }
</style>
<style  lang="less">
.authTable{
  
  .ivu-table-cell-tree {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 1px solid #dcdee2;
      border-radius: 2px;
      background-color: #fff;
      line-height: 12px;
      cursor: pointer;
      vertical-align: middle;
      transition: color .2s ease-in-out,border-color .2s ease-in-out;
      text-align: center;
  }

  .ivu-table-cell-tree-empty {
      cursor: default;
      color: transparent;
      background-color: transparent;
      border-color: transparent
  }

  .ivu-table-cell-tree:hover {
      color: #2d8cf0;
      border-color: #2d8cf0
  }

  .ivu-table-cell-tree-empty:hover {
      color: transparent;
      border-color: transparent
  }
}

</style>
